<template>
  <div class="container">
    <img src="../../../assets/images/newyearshop/dress_01.jpg" alt>

    <div class="nav">
      <span
        v-for="(item,index) in navs"
        :key="index"
        @click="navClick(index)"
        :class="{ active:changeNav == index}"
      >{{item.name}}</span>
    </div>
    <img src="../../../assets/images/newyearshop/dress_03.jpg" alt>
    <div class="layout">
      <div class="goods_list">
        <div
          v-for="(item,index) in  goods.slice(0,3)"
          :key="index"
          onclick="jump2good(item.goodsId)"
        >
          <span class="top_num">
            <i>top</i>
            <i>{{index+1}}</i>
          </span>
          <x-img
            class="img_box"
            :src="item.imgUrl"
            default-src="../../../assets/images/newyearshop/dress_05.jpg"
          />
          <p class="top_name">{{item.title}}</p>
          <p class="price">
            <span>
              ￥
              <i>{{item.group_price}}</i>
            </span>
            <span class="del">￥{{item.tjj_price}}</span>
            <span class="msq">马上抢</span>
          </p>
        </div>
      </div>

      <div class="goods_list_bd">
        <div
          v-for="(item,index) in  goods.slice(3,6)"
          :key="index"
          onclick="jump2good(item.goodsId)"
        >
          <span class="top_num">
            <i>top</i>
            <i>{{index+4}}</i>
          </span>
          <div class="left_img">
            <x-img
              :src="item.imgUrl"
              default-src="http://dev.hotkidclub.com/ceo/static/images/loading.png"
            />>
          </div>
          <div class="left_info">
            <p class="goods_name">{{item.title |newname}}</p>
            <p class="goods_price">
              <span>
                钜惠价:
                <i>{{item.price}}</i>
              </span>
              <span class="del">￥{{item.tjj_price}}</span>
            </p>
            <p class="ljq">
              立即抢
              <span>&gt;</span>
            </p>
          </div>
        </div>
      </div>
    </div>
    <img style src="../../../assets/images/newyearshop/dress_05.jpg" alt>
    <div class="layout">
      <div class="hot_list">
        <div v-for="(item,index) in  goods.slice(6)" :key="index" onclick="jump2good(item.goodsId)"  >
                                                                  
          <img src="../../../assets/images/index/hot.png" class="hot" alt>
          <x-img
            :src="item.imgUrl"
            default-src="http://dev.hotkidclub.com/ceo/static/images/loading.png"
          />
          <p class="name">{{item.title}}</p>
          <p class="price">
            <span>
              ￥
              <i>{{item.price}}</i>
            </span>
            <span class="del">￥{{item.tjj_price}}</span>
            <span class="msq">马上抢</span>
          </p>
        </div>
      </div>
    </div>
    <img @click="backIndex()" style src="../../../assets/images/newyearshop/dress_07.jpg" alt>
  </div>
</template>
<script>
import Vue from "vue";
import VConsole from "VConsole";
import Lib from "assets/js/Lib";
import { log } from "util";

export default {
  data() {
    return {
      goods: [],
      navs: [],
      changeNav: 0,
      goods_ids: [
        "247348,442212,512274,1214717,1214719,1214721,1214825,1214827,1214829,1214885,1214907,1214908,1214909,1214911,1214912,1214916,1214917,1214919",
        "1214920,1214921,1214922,1214923,1214924,1214925,1214930,1214931,1214932,1214933,1214934,1214935,1214936,1214938,1214940,1214943,1214944,1214945",
        "1214946,1214947,1214950,1214951,1214952,1214953,1214954,1214955,1214956,1214957,1214958,1214959,1214960,1214963",
        "1214922,1214923,1214924,1214925,1214930,1214931,1214932,1214933,1214934,1214935,1214936,1214938,1214940,1214943,1214944,1214945",
        "1214923,1214924,1214925,1214930,1214931,1214932,1214933,1214934,1214935,1214936,1214938,1214940,1214943,1214944,1214945"
      ]
    };
  },
  created() {
    var vConsole = new VConsole();
    var page = "dress";
    this.navClick(0);
    if (page == "dress") {
      this.navs = [
        { name: "女装" },
        { name: "男装" },
        { name: "内衣" },
        { name: "鞋靴" },
        { name: "箱包" }
      ];
    } else {
      this.navs = [
        { name: "9.9元专区" },
        { name: "休闲零食" },
        { name: "生鲜水果" },
        { name: "坚果蜜饯" },
        { name: "饼干糕点" }
      ];
    }
    console.log("Hello world");
  },
  methods: {
    navClick: function(index) {
      console.log(index);
      this.changeNav = index;
      var this_ = this;
      let params = {
        user_id: "55475773246993500",
        token: "be95b8d0f547f12_",
        uuid: "928b4d96-687d-4b4b-85b2-bd4b02d4f553",
        all: "1",
        goods_ids: this.goods_ids[index]
      };
      this.$http
        .post(
          "http://m.taojiji.org/index.php//NewYearShop/newYearGoods",
          this.$qs.stringify(params)
        )
        .then(function(response) {
          console.log(response.data.data);
          this_.goods = response.data.data;
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    backIndex:function(){
        console.log(222);
        
    }
    
  },
  filters: {
    newname: function(value) {
      if (value.length > 24) {
        return value.slice(0, 21) + "...";
      } else {
        return value;
      }
    }
  }
};
</script>
<style lang="less" scoped>
.container {
  background: #ca1212;
}
img {
  width: 100%;
  display: block;
}
.nav {
  width: 7.36rem;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  text-align: center;
}
.nav span {
  width: 1.39rem;
  background: url("../../../assets/images/newyearshop/nav2.jpg");
  background-repeat: no-repeat;
  background-size: 100%;
  height: 0.52rem;
  line-height: 0.72rem;
  color: #ffed94;
  font-size: 0.26rem;
}
.nav .active {
  background: url("../../../assets/images/newyearshop/nav1.jpg");
  background-repeat: no-repeat;
  background-size: 100%;
  color: #f32626;
}
.layout {
  background: #fee4aa;
  width: 7.35rem;
  margin: 0 auto;
  min-height: 6rem;
  padding-bottom: 0.1rem;
}
.goods_list {
  width: 7.18rem;
  margin: 0 auto;
  height: 3.38rem;
  background: url("../../../assets/images/newyearshop/topbg.png");
  display: flex;
  justify-content: space-between;
  padding: 0.1rem;
  box-sizing: border-box;
}
.goods_list .img_box {
  height: 2.23rem;
  width: 2.25rem;
  display: block;
}
.top_num {
  background: url("../../../assets/images/newyearshop/top.png");
  position: absolute;
  width: 0.5rem;
  height: 1.02rem;
  background-repeat: no-repeat;
  background-size: 100%;
  left: 0.05rem;
  top: -0.1rem;
  text-align: center;
  padding-top: 0.1rem;
}
.top_num i {
  display: block;
  font-style: normal;
  font-family: AkzidenzGroteskBQ-Cnd;
  font-size: 0.29rem;
  color: #fff;
}
.goods_list > div {
  width: 2.25rem;
  height: 3.16rem;
  background: #fff;
  position: relative;
}

.goods_list .top_name {
  font-family: FZLTXHK--GBK1-0;
  font-size: 0.22rem;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0px;
  color: #000000;
  padding: 0.08rem;
  overflow: hidden;
  padding-bottom: 0rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.goods_list .price {
  color: #f32625;
  font-size: 0.16rem;
}
.price span {
  margin-left: 0.1rem;
  margin-top: 0.1rem;
  float: left;
}
.price i {
  font-style: normal;
  font-size: 0.25rem;
}
.goods_list .del {
  text-decoration: line-through;
  color: #aaa;
  margin-top: 0.15rem;
}
.price .msq {
  width: 0.81rem;
  height: 0.29rem;
  background: #f32625;
  color: #fff;
  border-radius: 4px;
  font-size: 0.17rem;
  float: right;
  margin-right: 0.08rem;
  text-align: center;
  line-height: 0.29rem;
}
.goods_list_bd {
  width: 7.18rem;
  margin: 0.1rem auto;
  min-height: 3.38rem;
  background: url("../../../assets/images/newyearshop/topbg.png");
  padding: 0.1rem;
  margin-bottom: 0rem;
  box-sizing: border-box;
}
.goods_list_bd > div {
  width: 6.97rem;
  height: 2.75rem;
  background: #fff;
  margin-bottom: 0.1rem;
  padding: 0.1rem;
  box-sizing: border-box;
  overflow: hidden;
  clear: both;
  position: relative;
}
.goods_list_bd > div:nth-last-of-type(1) {
  margin-bottom: 0rem;
}
.goods_list_bd .left_img {
  width: 2.64rem;
  height: 100%;
  margin-right: 0.37rem;
  background: red;
  float: left;
}
.left_img img {
  width: 2.64rem;
  height: 100%;
}
.goods_list_bd .left_info {
  float: left;
  width: 3.52rem;
}
.left_info .goods_name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 0.32rem;
  width: 100%;
  height: 0.9rem;
}
.left_info .goods_price {
  margin-top: 0.48rem;
  width: 3.47rem;
  border-top: dashed 1px #bfbfbf;
  padding-top: 0.1rem;
}
.goods_price span {
  color: #ff395c;
  font-size: 0.24rem;
  margin-right: 0.21rem;
}
.goods_price span i {
  color: #eb335d;
  font-family: SourceHanSansCN-Bold;
  font-size: 0.39rem;
  font-style: normal;
}
.goods_price .del {
  text-decoration: line-through;
  color: #aaa;
  font-size: 0.28rem;
}
.ljq {
  margin-top: 0.12rem;
  width: 1.93rem;
  height: 0.44rem;
  background-color: #ff395c;
  border-radius: 0.05px;
  color: #ffffff;
  font-size: 0.28rem;
  text-align: center;
  line-height: 0.44rem;
}
.goods_list_bd .top_num {
  left: 2.48rem;
}
.hot_list {
  width: 7.18rem;
  min-height: 3.38rem;
  background: url("../../../assets/images/newyearshop/topbg.png");
  padding: 0.1rem;
  margin-bottom: 0rem;
  box-sizing: border-box;
  margin: 0 auto;
  justify-content: space-between;
  display: flex;
  flex-wrap: wrap;
}
.hot_list > div {
  width: 3.4rem;
  background: #fff;
  height: 4.86rem;
  margin-bottom: 0.17rem;
  position: relative;
}
.hot_list .hot {
  width: 0.59rem;
  height: 0.98rem;
  position: absolute;
  right: 0.1rem;
  top: 0.1rem;
  z-index: 22;
}
.hot_list > div:nth-last-of-type(1) {
  margin-bottom: 0rem;
}
.hot_list > div:nth-last-of-type(2) {
  margin-bottom: 0rem;
}
.hot_list .name {
  font-size: 0.35rem;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: -1px;
  color: #000000;
  padding: 0.08rem;
  overflow: hidden;
  padding-bottom: 0rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 0.16rem;
}
.hot_list .price {
  color: #d1072d;
  font-size: 0.34rem;
}
.hot_list .price span {
  margin-left: 0.1rem;
  margin-top: 0.1rem;
  float: left;
}
.hot_list .price i {
  font-style: normal;
  font-size: 0.38rem;
  margin-left: -0.15rem;
}
.hot_list .price .del {
  text-decoration: line-through;
  color: #aaa;
  margin-top: 0.2rem;
  font-size: 0.24rem;
}
.hot_list .price .msq {
  width: 1.24rem;
  height: 0.44rem;
  background-image: linear-gradient(#d1072d, #d1072d),
    linear-gradient(#ff2645, #ff2645);
  color: #fff;
  border-radius: 4px;
  font-size: 0.26rem;
  float: right;
  margin-right: 0.08rem;
  text-align: center;
  line-height: 0.44rem;
}
</style>

